<script setup lang="ts">
import {message} from "ant-design-vue";

function clickHandle() {
  message.warning('功能暂未适配！')
}
</script>

<template>
  <div class="relative mx-5 md:mx-0 rounded-xl vipCard">
    <img src="@/assets/vip/vipDiamonds.svg" class="absolute top-2 right-2" alt="vipDiamonds">
    <img src="@/assets/vip/vipShape.svg" class=" absolute bottom-0 left-0" alt="vipShape">
    <div class="w-full top-0 left-0 h-full py-6 px-10 relative z-10">
      <div class="flex gap-2 items-center">
        <img src="@/assets/vip/circleVipMark.svg" class="w-9 h-9" alt="circleVipMark">
        <h2 class="text-vip text-xl m-0">尊享年度会员</h2>
      </div>
      <div class="tracking-widest text-lg mt-2 text-vip-level2 whitespace-nowrap">可延长365天会员</div>
      <div class="mt-2.5"></div>
      <div class="tracking-widest text-lg text-vip-level2 flex items-end gap-4 whitespace-nowrap">
        <div class=" text-vip-level2">
          <span class="text-vip">¥</span>
          <span class=" text-vip text-4xl font-bold">360</span>/年
          <div
              class="absolute -top-3 -right-2 rounded-tl-lg rounded-br-lg py-1 px-2 text-sm text-white text-center font-bold"
              style="background: linear-gradient(90deg, rgb(255, 124, 75), rgb(254, 121, 75), rgb(252, 114, 77), rgb(249, 101, 80), rgb(244, 82, 85), rgb(244, 79, 86));">
            站长力荐
          </div>
        </div>
        <del>¥480/年</del>
      </div>
      <div class="mt-2.5"></div>
      <div class="flex gap-3 items-center">
        <button
            @click="clickHandle"
            class=" w-full font-bold shadow-inner text-gray-800 outline-none border-none hover:opacity-80 rounded-full py-1.5 text-lg cursor-pointer"
            style="background: rgb(232, 203, 150);">
          升级会员
        </button>
        <span class="text-vip opacity-60 underline whitespace-nowrap cursor-pointer hover:opacity-80">
              兑换会员
            </span>
      </div>
      <div class="mt-2.5"></div>
      <div class=" text-vip-level2 mt-2 text-sm">
        开通前请先阅读
        <span class=" text-vip cursor-pointer">
              《会员协议》
            </span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.vipCard {
  background: rgb(66, 64, 57);
  border: 1px solid #fff;
}

.text-vip-level2 {
  --tw-text-opacity: 1;
  color: rgba(165, 165, 165, var(--tw-text-opacity));
}

.text-vip {
  --tw-text-opacity: 1;
  color: rgba(252, 239, 194, var(--tw-text-opacity));
}
</style>
